<template>
  <view class="c-pd">
    <van-cell-group inset>
      <van-cell center title="开通邻里互助" use-label-slot :border="false">
        <view slot="right-icon">
          <van-switch
            :checked="data.helpFlag"
            active-color="#ffc300"
            size="24px"
            @change="
              (e: any) => {
                data.helpFlag = e.detail;
                handleHelpFlagChange(e);
              }
            "
          />
        </view>
      </van-cell>
    </van-cell-group>
    <van-cell-group inset class="oneCellClass" title="第一紧急联系人">
      <van-field
        label="姓名"
        :value="data.oneName"
        placeholder="请输入姓名"
        :border="false"
        clearable
        @change="
          (e: any) => {
            data.oneName = e.detail;
          }
        "
      />
      <van-field
        label="手机号"
        :value="data.onePhone"
        placeholder="请输入手机号"
        :border="false"
        clearable
        @change="
          (e: any) => {
            data.onePhone = e.detail;
          }
        "
      />
    </van-cell-group>
    <van-cell-group inset class="twoCellClass" title="第二紧急联系人">
      <van-field
        label="姓名"
        :value="data.twoName"
        placeholder="请输入姓名"
        :border="false"
        clearable
        @change="
          (e: any) => {
            data.twoName = e.detail;
          }
        "
      />
      <van-field
        label="手机号"
        :value="data.twoPhone"
        placeholder="请输入手机号"
        :border="false"
        clearable
        @change="
          (e: any) => {
            data.twoPhone = e.detail;
          }
        "
      />
    </van-cell-group>
    <van-cell-group inset class="threeCellClass" title="第三紧急联系人">
      <van-field
        label="姓名"
        :value="data.threeName"
        placeholder="请输入姓名"
        :border="false"
        clearable
        @change="
          (e: any) => {
            data.threeName = e.detail;
          }
        "
      />
      <van-field
        label="手机号"
        :value="data.threePhone"
        placeholder="请输入手机号"
        :border="false"
        clearable
        @change="
          (e: any) => {
            data.threePhone = e.detail;
          }
        "
      />
    </van-cell-group>
    <view class="box-border mt-6">
      <van-button color="#ffc300" block @click="submit">提交</van-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import useToast from '@/hooks/useToast';
import useAppStore from '@/store/modules/app';
import useModal from '@/hooks/useModal';
import UserRequest from '@/request/userRequest';
import { navigate } from '@/utils/navigate';

interface IData {
  oneName: string;
  onePhone: string;
  twoName: string;
  twoPhone: string;
  threeName: string;
  threePhone: string;
  helpFlag: boolean;
}

const data = reactive<IData>({
  oneName: '',
  onePhone: '',
  twoName: '',
  twoPhone: '',
  threeName: '',
  threePhone: '',
  helpFlag: false,
});

const { showToast } = useToast();

const { showModal } = useModal();

const store = useAppStore();

const { userInfo } = store.$state;

onLoad(() => {
  getUserContact();
});

const checkSubmit = () => {
  let reg = /^\d{1,12}$/;
  if (data.onePhone && !reg.test(data.onePhone)) {
    showToast('第一紧急联系人手机号格式错误', 'fail');
    return false;
  }
  if (data.twoPhone && !reg.test(data.twoPhone)) {
    showToast('第二紧急联系人手机号格式错误', 'fail');
    return false;
  }
  if (data.threePhone && !reg.test(data.threePhone)) {
    showToast('第三紧急联系人手机号格式错误', 'fail');
    return false;
  }
  return true;
};

const submit = () => {
  if (checkSubmit()) {
    let params = {
      userId: userInfo.userId,
      oneName: data.oneName,
      onePhone: data.onePhone,
      twoName: data.twoName,
      twoPhone: data.twoPhone,
      threeName: data.threeName,
      threePhone: data.threePhone,
    };
    showModal('确认提交吗？', {
      success: (resM) => {
        if (resM.confirm) {
          UserRequest.UpdateUserContact({ ...params, hasLoading: true }).then((res) => {
            if (res.status === 0) {
              showToast('操作成功');
              setTimeout(() => {
                navigate({ type: 'navigateBack', url: '' });
              }, 1000);
            }
          });
        }
      },
    });
  }
};

const handleHelpFlagChange = (e: any) => {
  UserRequest.UpdateHelpFlag({ helpFlag: e.detail === true ? 1 : 0, userId: userInfo.userId }).then((res) => {
    if (res.status === 0) {
      showToast('设置成功');
    }
  });
};

const getUserContact = () => {
  UserRequest.GetUserContact({ userId: userInfo.userId }).then((res) => {
    let resD = res.data;
    data.oneName = resD.oneName;
    data.onePhone = resD.onePhone;
    data.twoName = resD.twoName;
    data.twoPhone = resD.twoPhone;
    data.threeName = resD.threeName;
    data.threePhone = resD.threePhone;
    data.helpFlag = resD.helpFlag === 1 ? true : false;
  });
};
</script>

<style lang="scss" scoped>
:deep(.van-cell-group__title) {
  padding: var(--cell-group-title-padding, 16px 16px 8px);
}
</style>
